<template>
    <Header title="第二章 Flex和Grid" />
    <div class="w-full p-4 bg-white shadow-sm">
        <!-- 1.1 flex-basis -->
        <Section title="1.1 flex-basis">
            <p class="mb-2">用于控制弹性项目的初始大小的工具。</p>
            <div class="flex flex-row space-x-4 leading-6 font-bold text-white">
                <div
                    class="flex h-14 basis-64 items-center justify-center cursor-pointer rounded-lg bg-purple-500"
                >
                    basis-64
                </div>
                <div
                    class="flex h-14 basis-64 items-center justify-center rounded-lg bg-purple-500"
                >
                    basis-64
                </div>
                <div
                    class="flex h-14 basis-128 items-center justify-center rounded-lg bg-purple-500"
                >
                    basis-128
                </div>
            </div>
        </Section>
        <!-- 1.2 flex-direction -->
        <Section title="1.2 flex-direction">
            <p class="mb-2">用于控制弹性项目的方向。</p>
            <div class="flex flex-wrap space-x-4 text-white mb-4">
                <div
                    class="size-20 flex justify-center items-center bg-pink-400"
                >
                    01
                </div>
                <div
                    class="size-20 flex justify-center items-center bg-pink-400"
                >
                    02
                </div>
            </div>
            <div class="flex flex-col space-y-4 text-white">
                <div
                    class="size-20 flex justify-center items-center bg-sky-400"
                >
                    01
                </div>
                <div
                    class="size-20 flex justify-center items-center bg-sky-400"
                >
                    02
                </div>
            </div>
        </Section>
        <!-- 1.3 flex-wrap -->
        <Section title="1.3 flex-wrap">
            <p class="mb-2">用于控制弹性项目是否换行。</p>
            <div
                class="flex flex-wrap w-60 space-x-4 p-2 text-white bg-sky-200"
            >
                <div
                    class="size-20 flex justify-center items-center bg-pink-400"
                >
                    01
                </div>
                <div
                    class="size-20 flex justify-center items-center bg-pink-400"
                >
                    01
                </div>
                <div
                    class="size-20 flex justify-center items-center bg-pink-400"
                >
                    01
                </div>
            </div>
        </Section>
        <!-- 1.4 flex -->
        <Section title="1.4 flex">
            <p class="mb-2">用于控制弹性项如何增大和缩小的工具。</p>
            <div class="flex flex-row space-x-4 font-bold text-white">
                <div class="p-6 bg-sky-400">01</div>
                <div class="p-6 bg-sky-400">02</div>
                <div class="p-6 bg-sky-400 flex-1">flex-1</div>
                <div class="p-6 bg-sky-400 flex-1">flex-1</div>
                <div class="p-6 bg-sky-400 flex-initial">flex-1</div>
                <div class="p-6 bg-sky-400 flex-auto">flex-1</div>
            </div>
        </Section>
        <!-- 1.5 flex-grow -->
        <Section title="1.5 flex-grow">
            <p class="mb-2">用于控制弹性项如何增大的工具。</p>
            <ul class="flex flex-row space-x-4 text-white font-bold">
                <li
                    class="flex size-16 p-4 flex-none bg-sky-400 justify-center items-center"
                >
                    1
                </li>
                <li
                    class="flex p-4 grow-1 bg-sky-300 justify-center items-center"
                >
                    2
                </li>
                <li
                    class="flex p-4 grow-1 bg-sky-600 justify-center items-center"
                >
                    3
                </li>
            </ul>
        </Section>
        <!-- 1.6 flex-shrink -->
        <Section title="1.6 flex-shrink">
            <p class="mb-2">用于控制弹性项如何缩小的工具。</p>
            <ul class="flex flex-row space-x-4 text-white font-bold">
                <li
                    class="flex size-16 p-4 flex-none bg-sky-400 justify-center items-center"
                >
                    1
                </li>
                <li
                    class="flex w-6xl p-4 shrink-1 bg-sky-300 justify-center items-center"
                >
                    2
                </li>
                <li
                    class="flex w-6xl p-4 shrink-2 bg-sky-300 justify-center items-center"
                >
                    2
                </li>
            </ul>
        </Section>
        <!-- 1.7 order -->
        <Section title="1.7 order">
            <p class="mb-2">用于控制弹性项的排序的工具。</p>
            <ul class="flex space-x-4">
                <li
                    class="order-1 size-20 flex justify-center items-center bg-sky-200"
                >
                    1
                </li>
                <li
                    class="order-3 size-20 flex justify-center items-center bg-sky-300"
                >
                    2
                </li>
                <li
                    class="order-2 size-20 flex justify-center items-center bg-sky-400"
                >
                    3
                </li>
            </ul>
        </Section>
        <!-- 1.8 grid-template-columns -->
        <Section title="1.8 grid-template-columns">
            <p class="mb-2">用于控制网格列的数量和宽度的工具。</p>
            <ul
                class="grid w-1/3 grid-cols-3 gap-4 text-2xl text-white font-bold mb-4"
            >
                <li
                    class="py-4 flex justify-center items-center bg-sky-400 rounded-sm"
                >
                    1
                </li>
                <li
                    class="py-4 flex justify-center items-center bg-sky-400 rounded-sm"
                >
                    2
                </li>
                <li
                    class="py-4 flex justify-center items-center bg-sky-400 rounded-sm"
                >
                    3
                </li>
                <li
                    class="py-4 flex justify-center items-center bg-sky-400 rounded-sm"
                >
                    4
                </li>
            </ul>
        </Section>
        <!-- 1.9 grid-column -->
        <Section title="1.9 grid-column">
            <p class="mb-2">用于控制网格列的起始和结束位置的工具。</p>
            <ul class="grid w-1/3 grid-cols-3 gap-4 text-white font-bold mb-4">
                <li
                    class="py-4 flex justify-center items-center bg-red-400 rounded-sm"
                >
                    1
                </li>
                <li
                    class="py-4 flex justify-center items-center bg-red-400 rounded-sm"
                >
                    2
                </li>
                <li
                    class="py-4 flex justify-center items-center bg-red-400 rounded-sm"
                >
                    3
                </li>
                <li
                    class="py-4 flex justify-center col-span-3 items-center bg-red-400 rounded-sm"
                >
                    col-span-3
                </li>
            </ul>
        </Section>
        <!-- 2.0 grid-row -->
        <Section title="2.0 grid-row">
            <p class="mb-2">用于控制网格行的起始和结束位置的工具。</p>
            <ul
                class="grid w-2xl gap-1 text-center font-bold text-white grid-cols-3 grid-rows-3"
            >
                <li class="py-4 bg-purple-500">1</li>
                <li class="py-4 bg-purple-500">2</li>
                <li
                    class="py-4 bg-purple-500 row-span-3 flex items-center justify-center"
                >
                    3
                </li>
                <li
                    class="py-4 bg-purple-500 row-span-2 flex justify-center items-center"
                >
                    4
                </li>
                <li
                    class="py-4 bg-purple-500 row-span-2 flex justify-center items-center"
                >
                    5
                </li>
            </ul>
        </Section>
        <!-- 2.1 justify-items -->
        <Section title="2.1 justify-items">
            <p class="mb-2">用于控制弹性容器内弹性项的对齐方式。</p>
            <ul
                class="grid bg-slate-200 justify-items-center grid-rows-3 grid-cols-3 gap-4 text-white"
            >
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    01
                </li>
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    02
                </li>
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    03
                </li>
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    04
                </li>
            </ul>
        </Section>
        <!-- 2.2 justify-self -->
        <Section title="2.2 justify-self">
            <p class="mb-2">用于控制单个网格项如何沿其内联轴对齐的工具。</p>
            <ul class="grid gap-4 grid-rows-3 grid-cols-3">
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    01
                </li>
                <li
                    class="flex justify-self-center size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    02
                </li>
                <li
                    class="flex justify-self-end size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    03
                </li>
                <li
                    class="flex size-20 p-4 bg-purple-400 justify-center items-center"
                >
                    04
                </li>
            </ul>
        </Section>
    </div>
</template>

<script setup>
import Header from "../../components/title";
import Section from "../../components/section";
</script>

<style></style>
